// 该文件配置可参考 https://cn.windicss.org/guide/configuration.html
import { defineConfig } from 'windicss/helpers'
// import 不能使用 @ 作为src文件夹别名
import {
  primaryColor,
  infoColor,
  successColor,
  warningColor,
  errorColor,
} from './src/settings/app-default'

export default defineConfig({
  darkMode: 'class', // or 'media'
  // preflight: false, // 关闭后 h1, h2 等保持原有样式
  shortcuts: {
    // w-1280px 表示 width: 250px
    // mx-auto 表示 x 方向上居中, 等价 .mx-auto {margin-left: auto;margin-right: auto;}
    // px-15px 等价 .px-15px {padding-left: 15px;padding-right: 15px;}
    'center-layout': 'w-1280px mx-auto px-15px',
    // flex 弹性布局，justify-center 元素在x轴居中排列，items-center 每个元素在容器 y 轴的中部(默认会纵向拉伸填满父容器)
    'flex-center': 'flex justify-center items-center',
    // x 轴弹性居中
    'flex-x-center': 'flex justify-center',
    // 一行元素在 y 轴居中
    'flex-y-center': 'flex items-center',
    // inline-flex 容器在没有指定宽度的情况下，实际宽度由子元素撑开；flex 在没有指定宽度时，实际宽度为整行
    // 感觉 inline-flex 下 justify-center 有没有效果是一样的
    'inline-flex-center': 'inline-flex justify-center items-center',
    'inline-flex-x-center': 'inline-flex justify-center',
    'inline-flex-y-center': 'inline-flex items-center',
    // flex-1: 配置于容器中的元素，根据容器大小进行缩放，在父容器为 flex 时生效
    // overflow-hidden: 元素中的内容如果越界则不显示
    'flex-1-hidden': 'flex-1 overflow-hidden',
    // flex-col: 子元素在y轴上弹性分布, items-stretch: 如果没有设置宽度，则拉伸
    'flex-col-stretch': 'flex flex-col items-stretch',
    // 铺满整个屏幕(仅浏览器刚进入时可见的部分覆盖)
    'absolute-center': 'absolute left-0 top-0 flex justify-center items-center w-full h-full',
    // 左上角
    'absolute-lt': 'absolute left-0 top-0',
    // 右上角
    'absolute-lb': 'absolute left-0 bottom-0',
    // 左下角
    'absolute-rt': 'absolute right-0 top-0',
    // 右下角
    'absolute-rb': 'absolute right-0 bottom-0',
    // 铺满整个页面
    'fixed-center': 'fixed left-0 top-0 flex justify-center items-center w-full h-full',
    // whitespace-nowrap: 规定容器中的文本不进行换行：
    // overflow-ellipsis: 超过的文本以 ... 表示
    'ellipsis-text': 'whitespace-nowrap overflow-hidden overflow-ellipsis',
    // 容器中的文本不进行换行，超过的部分隐藏掉
    'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
  },
  theme: {
    extend: {
      colors: {
        primary: primaryColor,
        info: infoColor,
        success: successColor,
        warning: warningColor,
        error: errorColor,
        brand: {
          1: '#e8f4ff',
          2: '#1664ff',
        },
      },
    },
  },
  variants: {},
  plugins: [],
})
